import React, {Component} from 'react';
import GridTable from '../../components/display/gridTable';
import ScModal from '../../components/feedback/scModal';
import { Button, Input, Select, Row, Col, Menu, Dropdown, Icon, Divider, Tooltip, message, Carousel } from 'antd';
import { chargingApplication,
  processChargeNumApply
} from '../../fetch/fetchApi';
const Option = Select.Option;

class ChargeTimes extends Component {
  constructor () {
    super();
    this.state = {
      gridData: null,
      loadingmes: '查询',
      loading: !1,
      info: '',
      pagination: {
        total: 0
      }
    };
    this.init();
  }

  componentDidMount () {
    this.queryChargeInfo();
  }

  init () {
    this.query = {
      page: '1',
      pagecount: '10'
    };
    this.params = {};
    this.checkStatus = {
      '0': '不通过',
      '1': '申请通过',
      '2': '审核中',
      '3': '取消权限'
    }
    // 设置表头
    this.tableColumns = [
      {
        title: '用户账号',
        dataIndex: 'account',
        key: 'account',
        className: 'column-nowrap',
        fixed: 'left',
        width:100
      }, {
        title: '类型',
        dataIndex: 'userType',
        key: 'userType',
        className: 'column-nowrap',
        render: (text, record) => (<div>{text === 1 ? '企业': '个人'}</div>)
      }, {
        title: '企业名称',
        dataIndex: 'companyName',
        key: 'companyName',
        className: 'column-nowrap',
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text} >
            {text}
          </Tooltip>)
      }, {
        title: '企业资质',
        dataIndex: 'fullURL',
        key: 'fullURL',
        className: 'column-nowrap',
        render: (text, record) => (<img onClick={() => this.openThumbModal(record.fullURL, '图片预览', 0)} style={{height:'80px'}} src={record.fullURL && record.fullURL.toString().split(',')[0]}/>)
      }, {
        title: '充电数',
        dataIndex: 'chargeNum',
        key: 'chargeNum',
        className: 'column-nowrap',
      }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        className: 'column-nowrap',
        render: (text, record) => (
          <div>{this.checkStatus[text]}</div>
        )
      }, {
        title: '申请时间',
        dataIndex: 'createTime',
        key: 'createTime',
        className: 'column-nowrap',
      }, {
        title: '备注',
        dataIndex: 'info',
        key: 'info',
        className: 'column-nowrap',
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text} >
            {text}
          </Tooltip>)
      }, {
        title: '操作',
        key: 'action',
        className: 'column-nowrap',
        fixed: 'right',
        width:100,
        render: (text, record) => (
          record.status === 2 ?
          <div className="action-wrap">
            <a href="javascript:void(0);" onClick={() => {this.showConfirmModal(record.key, '1')}}>通过</a>
            <Divider type="vertical" />
            <a href="javascript:void(0);" onClick={() => {this.showConfirmModal(record.key, '0')}}>拒绝</a>
            <Divider type="vertical" />
            <a href="javascript:void(0);" onClick={() => {this.showConfirmModal(record.key, '3')}}>取消</a>
          </div> : <div> --- </div>
        )
      }
    ];

    // 设置checkbox选择参数
    this.rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
          this.params['ids'] = selectedRowKeys.join(',');
      },
      getCheckboxProps: record => ({
        disabled: record.status != 2,
        name: record.name,
      }),
    };
  }

  // fetch DataSource
  async chargingApplication () {
    this.setState({
      loading: !0
    });
    try {
      const resData = await chargingApplication(this.query);
      if (resData.data.code === '200') {
        const pagination = {
          total: resData.data.pageLimit.totalCount,
          onShowSizeChange: (current) => {
            this.turnPage(current)
          },
          onChange:(current) => {
            this.turnPage(current)
          }
        }
        this.setState({
          pagination
        });
        return resData.data.data;
      }
    } catch (e) {
      console.log(e);
    }
  }

  // 处理充电数申请
  async processChargeNumApply () {
    try {
      const resData = await processChargeNumApply(this.params);
      resData.data.code === '200' && this.queryChargeInfo();
    } catch (e) {
      console.log(e);
    }
  }

  // 处理充电申请
  cofirmDispatch () {
    this.params['info'] = this.state.info;
    //if (this.params['info'].trim()) {
      this.processChargeNumApply().then(() => {
        this.cancel();
      });
    //} else {
    //  message.warning('请输入备注', 1);
    //}
  }

  // 显示提交备注窗口
  showConfirmModal (id, status) {
    id && (this.params['ids'] = id);
    status && (this.params['status'] = status);
    this.setState({
      width: 520,
      modalTitle: '备注',
      modalName: 'descinfo'
    }, () => {
      this.setState({
        modalVisible: !0
      });
    });
  }


  // 跳转页码
  turnPage (current) {
    this.query['page'] = current.toString();
    this.chargingApplicationCb();
  }

  // 提交查询
  queryChargeInfo () {
    this.query.page = '1';
    this.state.pagination.current = 1;
    this.setState({
      pagination: this.state.pagination
    });
    this.chargingApplicationCb();
  }

  chargingApplicationCb() {
    this.chargingApplication().then((data) => {
      this.setState({
        loading: !1,
        gridData: data
      });
    });
  }

  // 注入备注信息
  descInputHandler (e) {
    this.params['info'] = e.target.value;
    this.setState({
      info: e.target.value
    });
  }

  // 注入账号信息参数
  userInputHandler (e) {
    this.query['userPhone'] = e.target.value.toString();
  }

  // 注入状态参数
  stateInputHandler (e) {
    this.query['status'] = e.toString();
  }

  // 注入类型参数
  typeInputHandler (e) {
    this.query['type'] = e.toString();
  }

  // 更多按钮切换
  handleMenuClick (e) {
    this.params['status'] = e.key;
    if (!this.params['ids']) {
      message.warning('请先勾选条目', 1);
      return;
    }
    this.showConfirmModal();
  }

  // 打开预览
  openThumbModal (imgs, title, type) {
    this.openType = type;
    const imgArr = imgs.toString().split(',');
    const thumbDom = [];
    for (let i of imgArr) {
      i.length && thumbDom.push(<div key={i}><h3><img src={i} /></h3></div>);
    }
    this.setState({
      width: 620,
      modalTitle: title,
      thumbDom: thumbDom,
      modalName: 'thumbPic'
    }, () => {
      this.setState({
        modalVisible: !0
      });
    });
  }

  // 取消弹窗
  cancel () {
    // this.params['ids'] = '';
    this.setState({
      modalVisible: !1,
      confirmLoading: !1,
      info: ''
    });
  }

  render () {
    const menu = (
      <Menu onClick={this.handleMenuClick.bind(this)}>
        <Menu.Item key="1">通过</Menu.Item>
        <Menu.Item key="0">拒绝</Menu.Item>
        <Menu.Item key="3">取消</Menu.Item>
      </Menu>
    );
    const Content = <div className="sc-page-content">
      <div className="page-toolbar">
        <Row gutter={8}>
          <Col lg={8} xl={4}>
            <Input placeholder="用户账号精确查询" onChange={this.userInputHandler.bind(this)}/>
          </Col>
          <Col lg={8} xl={4}>
            <Select placeholder="状态" onChange={this.stateInputHandler.bind(this)}>
              <Option value="">全部</Option>
              <Option value="0">未通过</Option>
              <Option value="1">申请通过</Option>
              <Option value="2">审核中</Option>
              <Option value="3">取消权限</Option>
            </Select>
          </Col>
          <Col lg={8} xl={4}>
            <Select placeholder="类型" onChange={this.typeInputHandler.bind(this)}>
              <Option value="">全部</Option>
              <Option value="0">个人</Option>
              <Option value="1">企业</Option>
            </Select>
          </Col>
          <div  className="button-inlineBlock">
            <Button type="primary" onClick={this.queryChargeInfo.bind(this)}>{this.state.loadingmes}</Button>
            <Dropdown overlay={menu}>
				  <Button>
					  更多<Icon type="down" />
				  </Button>
            </Dropdown>
          </div>
        </Row>
      </div>
      <div className="page-panel">
        <GridTable postyle="table-center" rowSelection={this.rowSelection} data={this.state.gridData} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination}/>
        {this.state.modalName === 'thumbPic' && <ScModal
          width={this.state.width}
          modalVisible={this.state.modalVisible}
          modalTitle={this.state.modalTitle}
          modalContent={(<div className="sc-modal-scroll">
            <div className={'modal-list'}>
              <Carousel autoplay>
                {this.state.thumbDom}
              </Carousel>
            </div>
          </div>)}
          cancel={this.cancel.bind(this)}
          footer={null}
        />}
        {this.state.modalName === 'descinfo' && <ScModal
          width={this.state.width}
          modalVisible={this.state.modalVisible}
          modalTitle={this.state.modalTitle}
          modalContent={<div className="sc-modal-scroll">
            <div className="modal-list">
              <Input type='text' placeholder={'备注输入'} value={this.state.info} onChange={this.descInputHandler.bind(this)}/>
            </div>
          </div>}
          handle={this.cofirmDispatch.bind(this)}
          cancel={this.cancel.bind(this)}
        />}
      </div>
    </div>;

    return Content;
  }
}

export default ChargeTimes;